---
import BaseLayout from "../layouts/BaseLayout.astro"
---

<BaseLayout childpage backtotop>
  <link
    rel="stylesheet"
    slot="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/bootstrap-table.min.css"
  />
  <link
    rel="stylesheet"
    slot="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css"
  />
  <div class="container-fluid">
    <div class="row g-3">
      <!--基本信息-->
      <div class="col-12">
        <div class="card border-0 shadow-sm">
          <div class="card-header bg-body">基本信息</div>
          <div class="card-body">
            <form>
              <div class="row g-3">
                <div class="col-lg-6">
                  <div class="row">
                    <label
                      for="username"
                      class="col-sm-2 col-form-label text-sm-end"
                      >登录账号</label
                    >
                    <div class="col-sm-10">
                      <input
                        type="text"
                        class="form-control"
                        id="username"
                        name="username"
                        value="admin888"
                        disabled
                      />
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="row">
                    <label
                      for="nickname"
                      class="col-sm-2 col-form-label text-sm-end"
                      >用户名称</label
                    >
                    <div class="col-sm-10">
                      <input
                        type="text"
                        class="form-control"
                        id="nickname"
                        name="nickname"
                        value="欲饮琵琶码上催"
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="col-12 lts-search-area">
        <div class="card border-0 shadow-sm">
          <div class="card-body bg-body">
            <form
              class="row row-cols-sm-auto g-3 py-2 align-items-center"
              id="queryForm"
            >
              <div class="col-12">
                <div class="row">
                  <label for="name" class="col-sm-auto col-form-label"
                    >角色名称</label
                  >
                  <div class="col">
                    <input
                      type="email"
                      class="form-control"
                      id="name"
                      name="name"
                    />
                  </div>
                </div>
              </div>
              <div class="col-12 gap-2">
                <button type="button" class="btn btn-light lts-search-btn">
                  <i class="bi bi-search"></i>搜索
                </button>
                <button type="button" class="btn btn-light lts-reset-btn">
                  <i class="bi bi-arrow-clockwise"></i>重置
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="col-12">
        <div class="card border-0 shadow-sm">
          <div class="card-body bg-body">
            <!--  表格上方左侧的工具条区域    -->
            <div id="toolbar" class="d-flex flex-wrap gap-2 mb-2"></div>
            <!--  数据表格    -->
            <table id="table"></table>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="d-flex justify-content-center gap-2">
          <button class="btn btn-success btn-sm lts-batch-btn"
            ><i class="bi bi-check"></i>确定</button
          >
          <button class="btn btn-danger btn-sm" onclick="x()"
            ><i class="bi bi-arrow-up-left-square"></i>关闭</button
          >
        </div>
      </div>
    </div>
  </div>

  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/bootstrap-table.min.js"
  ></script>
  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/locale/bootstrap-table-zh-CN.js"
  ></script>
  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"
  ></script>

  <script is:inline slot="js">
    const $table = $("#table")
    // 列配置
    const columns = [
      {
        radio: true,
        visible: true,
      },
      {
        title: "ID",
        field: "id",
        align: "center",
        sortable: true,
        width: 100,
      },
      {
        title: "角色名称",
        field: "name",
        align: "center",
      },
      {
        title: "加入时间",
        field: "create_at",
        align: "center",
      },
    ]

    $table.Table({
      //右侧不要固定列
      fixedRightNumber: 0,
      // 请求方法
      method: "get",
      // 请求地址
      url: "/role",
      // 请求得到的数据类型
      dataType: "json",
      // 响应处理,如果服务端返回的数据不是指定的格式，可以在前端进行处理
      responseHandler: function (res) {
        return res.data
      },
      queryParams: function (params) {
        //params是一个对象
        //左边是发送到服务端的字段参数，这里是随便做的示例,根据需求跳调整
        return {
          // 每页数据量
          limit: params.limit,
          // sql语句起始索引
          offset: params.offset,
          page: params.offset / params.limit + 1,
          // 排序的列名
          sort: params.sort,
          // 排序方式 'asc' 'desc'
          sortOrder: params.order,
          //角色名称
          name: $("input[name=name]").val(),
        }
      },
      columns,
    })

    //搜索
    $table.Table("search", ".lts-search-btn")
    //重置
    $table.Table("reset", ".lts-reset-btn", ".lts-search-area form")

    //确定
    $table.Table("batch", ".lts-batch-btn", function (ids, selectedRows) {
      $.modal({
        body: `确定要给该用户设置角色[${selectedRows[0].name}]吗?`,
        ok: function () {
          //发起ajax请求
          $.ajax({
            //  /user/role/userid
            url: "/user/role/45",
            method: "post",
            data: {
              //角色id
              role_id: selectedRows[0].id,
            },
          }).then((response) => {
            if (response.code === 200) {
              // 通知成功
              $.toasts.success("角色分配成功")

              //关闭当前的modal
              this.hide()

              const url = "user-list.html"
              //拿到用户列表页的$table变量调用refreshSelectPage刷新方法
              parent.Quicktab.get("qtab")
                .getTabWindowByUrl(url)
                ?.$table.Table("refreshSelectPage")
              //关闭当前激活的Tab并激活用户列表页
              parent.Quicktab.get("qtab")
                .closeActiveTab()
                .activeTabByUrl(url, true)
            }
          })
        },
      })
    })

    //关闭页面
    function x() {
      //找到父级页面的Quicktab实例
      parent.Quicktab.get("qtab")
        .closeActiveTab()
        .activeTabByUrl("user-list.html", true)
    }
  </script>
</BaseLayout>
